<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset='utf-8'/>
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <script src='../assets/mapbox-gl-dev.js'></script>
    <link href='../assets/mapbox-gl.css' rel='stylesheet'/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
<div id='map'></div>
<script type="application/javascript">
    var resources_type = {
        "id": 4,
        "name": "\u505c\u8f66\u573a",
        "path": ["/mapbox-lg/assets/images/carpark.jpg"],
        "type": 2
    };
    var resources = [{
        "id": 7,
        "code": "parking001",
        "name": "\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a",
        "i_eq_type_id": 4,
        "b_zone_id": 1,
        "longitude": "116.391907",
        "latitude": "39.914951",
        "longitude_gis": "119.275128",
        "latitude_gis": "34.642646",
        "introduction": "\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a",
        "remark": "\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a",
        "path": null,
        "camera_url": "",
        "port": null,
        "ip": "",
        "status": 2,
        "extra": {
            "geojson": "[{\u0022id\u0022:\u0022f919d191ae17dbf484cc66df2d0bb845\u0022,\u0022type\u0022:\u0022Feature\u0022,\u0022properties\u0022:{},\u0022geometry\u0022:{\u0022coordinates\u0022:[[[119.27508284426733,34.64404626915126],[119.27711969240471,34.64314782838164],[119.27505684202134,34.64103003662652],[119.2731586729883,34.64202832903794],[119.27508284426733,34.64404626915126]]],\u0022type\u0022:\u0022Polygon\u0022}}]",
            "area": "60753.87",
            "park_number": "500",
            "park_type": "2",
            "park_price": "15.00"
        },
        "created_id": 1,
        "updated_id": 1,
        "created_at": "2018-10-24 09:35:27",
        "updated_at": "2018-11-29 14:57:07",
        "geojson": "[{\u0022id\u0022:\u0022fdd79786181483ecaeb6c342c6b83d1f\u0022,\u0022type\u0022:\u0022Feature\u0022,\u0022properties\u0022:{},\u0022geometry\u0022:{\u0022coordinates\u0022:[[[119.28147241551488,34.64496765639947],[119.28193844438078,34.64496018761034],[119.28190364351588,34.644522017818886],[119.28137557828717,34.644541934675686],[119.28147241551488,34.64496765639947]]],\u0022type\u0022:\u0022Polygon\u0022}}]",
        "area": "100391.47"
    }, {
        "id": 162,
        "code": "parking002",
        "name": "\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2",
        "i_eq_type_id": 4,
        "b_zone_id": 1,
        "longitude": "116.391907",
        "latitude": "39.914951",
        "longitude_gis": "119.283155",
        "latitude_gis": "34.641892",
        "introduction": "\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2",
        "remark": "\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2\u8fde\u4e91\u6e2f\u82b1\u679c\u5c71\u5730\u4e0b\u505c\u8f66\u573a2",
        "path": null,
        "camera_url": "",
        "port": null,
        "ip": "",
        "status": 2,
        "extra": {
            "geojson": "[{\u0022id\u0022:\u0022fdd79786181483ecaeb6c342c6b83d1f\u0022,\u0022type\u0022:\u0022Feature\u0022,\u0022properties\u0022:{},\u0022geometry\u0022:{\u0022coordinates\u0022:[[[119.28285798129582,34.642205848878575],[119.28360611214049,34.64212828833401],[119.28342542380085,34.64163632573964],[119.28278860768813,34.641704812288765],[119.28285798129582,34.642205848878575]]],\u0022type\u0022:\u0022Polygon\u0022}}]",
            "area": "3598.32",
            "park_number": "11122",
            "park_type": "1",
            "park_price": "2115.00"
        },
        "created_id": 1,
        "updated_id": 1,
        "created_at": "2018-11-29 13:03:15",
        "updated_at": "2018-11-29 15:00:08",
        "geojson": "[{\u0022id\u0022:\u0022fdd79786181483ecaeb6c342c6b83d1f\u0022,\u0022type\u0022:\u0022Feature\u0022,\u0022properties\u0022:{},\u0022geometry\u0022:{\u0022coordinates\u0022:[[[119.28321376173818,34.64341624016444],[119.28382686317775,34.64334997679842],[119.28375374062318,34.64292203189153],[119.28311692451047,34.642990518440655],[119.28321376173818,34.64341624016444]]],\u0022type\u0022:\u0022Polygon\u0022}}]",
        "area": "2777.93"
    }, {
        "id": 163,
        "code": "parking003",
        "name": "\u7334\u738b\u505c\u8f66\u573a",
        "i_eq_type_id": 4,
        "b_zone_id": 1,
        "longitude": null,
        "latitude": null,
        "longitude_gis": "119.283312",
        "latitude_gis": "34.637549",
        "introduction": "\u7334\u738b\u505c\u8f66\u573a",
        "remark": "\u7334\u738b\u505c\u8f66\u573a",
        "path": null,
        "camera_url": null,
        "port": null,
        "ip": null,
        "status": 2,
        "extra": {
            "geojson": "[{\u0022id\u0022:\u00221ba57067c05ea00537479a2f8e23738b\u0022,\u0022type\u0022:\u0022Feature\u0022,\u0022properties\u0022:{},\u0022geometry\u0022:{\u0022coordinates\u0022:[[[119.28354473479345,34.63845031357053],[119.28513983759296,34.637870733393896],[119.28384460895109,34.63629926880567],[119.28147758877788,34.63688267277199],[119.28205873077934,34.63826137864338],[119.28354473479345,34.63845031357053]]],\u0022type\u0022:\u0022Polygon\u0022}}]",
            "area": "51554.32",
            "park_number": "10000",
            "park_type": "1",
            "park_price": "125.00"
        },
        "created_id": 1,
        "updated_id": 1,
        "created_at": "2018-11-29 17:00:51",
        "updated_at": "2018-11-29 23:47:30",
        "geojson": null,
        "area": null
    }];
    var status_label = {
        "1": {"text": "\u7981\u7528", "value": 1, "color": "danger"},
        "2": {"text": "\u542f\u7528", "value": 2, "color": "success"}
    };
    var map_info = {
        "id": 1,
        "name": "\u82b1\u679c\u5c71\u98ce\u666f\u533a\u7535\u5b50\u5730\u56fe",
        "b_zone_id": 1,
        "url": "http:\/\/192.168.1.3:8888\/geoserver\/hgs\/wms",
        "longitude": "119.27382231",
        "latitude": "34.64245889",
        "zoom": "14",
        "maxzoom": "22",
        "layer": "hgs:hgs",
        "remark": "\u82b1\u679c\u5c71\u98ce\u666f\u533a\u7535\u5b50\u5730\u56fe",
        "status": 2,
        "created_id": 0,
        "updated_id": 0,
        "created_at": "2018-10-24 10:19:21",
        "updated_at": "2018-11-13 10:52:18"
    };
    var i_eq_type_id = '4';
    var view = 'parking';
    var route = '/iridium/resources/basic/parking';
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFvcmV5IiwiYSI6ImNqNWhrenIwcDFvbXUyd3I2bTJxYzZ4em8ifQ.KHZIehQuWW9AsMaGtATdwA';
    var map = new mapboxgl.Map({
        container: 'map',
        center: [map_info.longitude, map_info.latitude],
        zoom: map_info.zoom,
        //minZoom: map_info.zoom,
        //maxZoom: map_info.maxzoom,
        style: 'mapbox://styles/mapbox/streets-v9',
    });

    map.on('load', function () {
        map.addLayer({
            'id': 'wms-layer',
            'type': 'raster',
            'source': {
                'type': 'raster',
                'tiles': [map_info.url + '?' + 'bbox={bbox-epsg-3857}&' + 'format=image/png&' + 'service=WMS&' + 'version=1.1.1&' + 'request=GetMap&' + 'srs=EPSG:3857&' + 'width=256&' + 'height=256&' + 'layers=' + map_info.layer],
                'tileSize': 256
            }
        });
        map.addLayer({
            "id": "water2",
            "type": "fill",
            "source": {
                type: 'vector',
                url: 'mapbox://mapbox.mapbox-streets-v7'
            },
            "source-layer": "water",
            "paint": {
                "fill-color": "#30ccff",
            }
        });
        map.addLayer({
            "id": "road",
            "type": "line",
            "source": {
                type: 'vector',
                url: 'mapbox://mapbox.mapbox-streets-v7'
            },
            "source-layer": "road",
            "layout": {
                "line-join": "round",
                "line-cap": "round"
            },
            "paint": {
                "line-color": "#ff69b4",
                "line-width": 2
            }
        });
        map.addLayer({
            "id": "building2",
            "type": "fill",
            "source": {
                type: 'vector',
                url: 'mapbox://mapbox.mapbox-streets-v7'
            },
            "source-layer": "building",
            "paint": {
                "fill-color": "#ff9b15",
            }
        });
        // map.addLayer({
        //     "id": "terrain-data",
        //     "type": "line",
        //     "source": {
        //         type: 'vector',
        //         url: 'mapbox://mapbox.mapbox-terrain-v2'
        //     },
        //     "source-layer": "contour",
        //     "layout": {
        //         "line-join": "round",
        //         "line-cap": "round"
        //     },
        //     "paint": {
        //         "line-color": "#ff69b4",
        //         "line-width": 1
        //     }
        // });
        resources.forEach(function (resource, i) {
            if (resource.extra.geojson) {
                map.addSource("national-park" + i, {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": JSON.parse(resource.extra.geojson)
                    }
                });
                map.addLayer({
                    "id": "park-boundary" + i,
                    "type": "fill",
                    "source": "national-park" + i,
                    "paint": {
                        'fill-color': '#088',
                        'fill-opacity': 0.8
                    },
                    "filter": ["==", "$type", "Polygon"]
                });
            }
        });
        var mResources = resources.filter(function (resource) {
            return resource['i_eq_type_id'] === resources_type.id
        });
        map.addSource('resources_' + resources_type.id, {
            type: 'geojson',
            data: {
                "type": "FeatureCollection",
                "features": getFeatures(mResources)
            }
        });
        map.loadImage(resources_type.path[0], function (error, image) {
            if (error) throw error;
            map.addImage('online_' + resources_type.id, image);
        });
        map.addLayer({
            "id": "resources_" + resources_type.id,
            "type": "symbol",
            "source": 'resources_' + resources_type.id,
            "layout": {
                "icon-image": "{icon}",
                "icon-size": 0.2
            }
        });
    });

    map.on('click', 'resources_' + resources_type.id, function (event) {
        var mResource = event.features[0].properties;
        map.panTo([mResource.longitude_gis, mResource.latitude_gis]);
        new mapboxgl.Popup({closeOnClick: false})
            .setLngLat([mResource.longitude_gis, mResource.latitude_gis])
            .setHTML(mResource.name)
            .addTo(map);
    });

    function getFeatures(resources) {
        var features = [];
        resources.forEach(function (resource) {
            if (!resource.latitude_gis || !resource.longitude_gis) return false;
            var status = 'outline_';
            if (resource.status === 2) {
                status = 'online_'
            }
            resource['icon'] = status + resources_type.id;
            features.push({
                "type": "Feature",
                "properties": resource,
                "geometry": {
                    "type": "Point",
                    "coordinates": [resource.longitude_gis, resource.latitude_gis]
                }
            })
        });
        return features
    }
</script>
</body>
</html>